<template>
  <div>
    <div :id="`qwzj_pie${index}`" :style="{ width: '100%', height: '250px' }"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
// var data = [
//   {
//     name: '正常运行',
//     value: 54
//   },
//   {
//     name: '异常运行',
//     value: 80
//   }
// ]

export default {
  name: 'qwzj_pie',
  props: ['index', 'pieData', 'pieDataType', 'pageType'],
  data() {
    return {}
  },
  mounted() {
    var namer = []
    var colors = []
    var _this = this
    var dataHigh = 0
    var total = 0
    var perHigh = ''
    var unit = ''
    switch (this.pageType) {
      case 'qwHost': // 巡检中心-运行检测-前卫主机
        namer = ['在线', '离线']
        colors = [
          ['#4ECB73', 'rgba(78,203,115,0.3)'],
          ['#F56C6C', 'rgba(245,108,108,0.3)'],
        ]
        if (this.pieDataType === 'YC') {
          dataHigh = this.pieData.YC
        } else if (this.pieDataType === 'ZC') {
          dataHigh = this.pieData.ZC
        }
        total = this.pieData.YC + this.pieData.ZC
        if (dataHigh !== 0) {
          perHigh = ((dataHigh / total) * 100).toFixed(0) + '%'
        } else {
          total = 0
          perHigh = 0 + ' %'
        }
        unit = '台'
        break
      case 'faultReportList': // 业务报表-故障报表-故障详单报表
        namer = ['未生成', '已生成', '已解决']
        colors = [
          ['#F56C6C', 'rgba(245,108,108,0.3)'],
          ['#1F90FF', 'rgba(31, 144, 255,0.3)'],
          ['#4ECB73', 'rgba(78,203,115,0.3)'],
        ]
        this.pieData.forEach((item) => {
          total += item.count
          if (item.sfscgd === this.pieDataType) {
            dataHigh = item.count
          }
        })
        if (dataHigh !== 0) {
          perHigh = ((dataHigh / total) * 100).toFixed(0) + '%'
        } else {
          perHigh = 0 + ' %'
        }
        unit = '单'
        break
    }
    var myChart = echarts.init(document.getElementById(`qwzj_pie${this.index}`))
    var option = {
      backgroundColor: '#fff',
      title: [
        {
          text: namer[_this.index] + '{num|' + dataHigh + '}' + unit,
          bottom: '0',
          left: '50%',
          textAlign: 'center',
          textStyle: {
            color: '#666',
            fontSize: 14,
            fontWeight: 'normal',
            textAlign: 'center',
            rich: {
              num: {
                color: colors[_this.index][0],
                fontSize: 14,
              },
            },
          },
        },
      ],
      graphic: [
        {
          type: 'text',
          top: '46%', // 文字
          left: '46%',
          style: {
            text: perHigh,
            font: '30px "microsoft yahei"',
            textAlign: 'center',
            fill: colors[_this.index][0],
          },
        },
      ],
      tooltip: {
        show: false,
      },
      series: [
        {
          name: namer[_this.index],
          type: 'pie',
          center: '50%',
          radius: [80, 90],
          startAngle: 180, // 起始角度
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          hoverAnimation: false,
          emphasis: false,
          data: [
            {
              // 内容块
              value: dataHigh,
              name: '',
              itemStyle: {
                normal: {
                  color: colors[_this.index][0],
                },
              },
            },
            {
              // 底部
              name: '',
              itemStyle: {
                emphasis: {
                  color: '#e6e9f0',
                },
                normal: {
                  color: '#e6e9f0',
                },
              },
              value: total,
            },
          ],
        },
      ],
    }
    myChart.setOption(option)
    // myChart.setOption({
    //   backgroundColor: '#fff',
    //   title: {
    //     text: namer[_this.index],
    //     left: '50%',
    //     bottom: '0',
    //     textAlign: 'center',
    //     textStyle: {
    //       fontWeight: 'normal',
    //       fontSize: '14',
    //       color: colors[_this.index][0],
    //       textAlign: 'center',
    //     },
    //   },
    //   series: [
    //     {
    //       name: namer[_this.index],
    //       type: 'pie',
    //       clockWise: false,
    //       radius: [80, 90],
    //       itemStyle: {
    //         normal: {
    //           color: colors[_this.index][0],
    //           shadowColor: colors[_this.index][0],
    //           shadowBlur: 0,
    //           label: {
    //             show: false,
    //           },
    //           labelLine: {
    //             show: false,
    //           },
    //         },
    //       },
    //       hoverAnimation: false,
    //       center: '50%',
    //       data: [
    //         {
    //           value: _this.pieData,
    //           label: {
    //             normal: {
    //               formatter: function (params) {
    //                 return params.value + '\n' + '{a|台}'
    //               },
    //               position: 'center',
    //               show: true,
    //               textStyle: {
    //                 fontSize: '30',
    //                 fontWeight: 'bold',
    //                 color: colors[_this.index][0],
    //               },
    //               rich: {
    //                 a: {
    //                   color: '#7F7F7F',
    //                   fontSize: 14,
    //                 },
    //               },
    //             },
    //           },
    //         },
    //         {
    //           value: 100 - _this.pieData,
    //           name: 'invisible',
    //           itemStyle: {
    //             normal: {
    //               color: colors[_this.index][1],
    //             },
    //             emphasis: {
    //               color: colors[_this.index][1],
    //             },
    //           },
    //         },
    //       ],
    //     },
    //   ],
    // })
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
<style lang="scss"></style>
